<!-- 文章列表页面 -->
<template>
  <view class="article-container">
    <!-- 顶部搜索栏 -->
    <u-sticky bgColor="#ffffff">
      <view class="search-box">
        <u-search
          v-model="keyword"
          placeholder="搜索文章"
          showAction
          actionText="搜索"
          @search="onSearch"
          @custom="onSearch"
        ></u-search>
      </view>
    </u-sticky>

    <!-- 栏目选择 -->
    <view class="channel-tabs">
      <u-tabs
        :list="channelList"
        :current="currentTab"
        @change="onTabChange"
        itemStyle="width: auto;padding: 0 20rpx;"
      ></u-tabs>
    </view>

    <!-- 文章列表 -->
    <view class="article-list">
      <u-empty v-if="articleList.length === 0" text="暂无文章" mode="list"></u-empty>
      <view v-else>
        <view
          class="article-item"
          v-for="(item, index) in articleList"
          :key="index"
          @click="goDetail(item)"
        >
          <!-- 单图模式 -->
          <view class="article-item-single" v-if="!item.images_list || item.images_list.length <= 1">
            <view class="article-info">
              <view class="article-title u-line-2">{{ item.title }}</view>
              <view class="article-desc u-line-2">{{ item.description || '暂无描述' }}</view>
              <view class="article-meta">
                <text class="article-author">{{ item.user?.nickname || '佚名' }}</text>
                <text class="article-time">{{ item.create_date }}</text>
                <text class="article-views">{{ item.views }}阅读</text>
              </view>
            </view>
            <view class="article-image" v-if="item.image">
              <u-image :src="item.image" width="200rpx" height="150rpx" radius="4"></u-image>
            </view>
          </view>

          <!-- 多图模式 -->
          <view class="article-item-multi" v-else>
            <view class="article-title u-line-2">{{ item.title }}</view>
            <view class="article-images">
              <view
                class="article-image-item"
                v-for="(img, imgIndex) in item.images_list.slice(0, 3)"
                :key="imgIndex"
              >
                <u-image :src="img" width="220rpx" height="150rpx" radius="4"></u-image>
              </view>
            </view>
            <view class="article-meta">
              <text class="article-author">{{ item.user?.nickname || '佚名' }}</text>
              <text class="article-time">{{ item.create_date }}</text>
              <text class="article-views">{{ item.views }}阅读</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <u-loadmore
        :status="loadStatus"
        @loadmore="loadMore"
        marginTop="20"
        marginBottom="20"
      ></u-loadmore>
    </view>
  </view>
</template>

<script>
import { archives } from '@/api/cms'

export default {
  data() {
    return {
      keyword: '',
      currentTab: 0,
      channelList: [{ name: '全部' }],
      articleList: [],
      page: 1,
      loadStatus: 'loadmore', // loadmore, loading, nomore
      channelId: 0
    }
  },
  onLoad(options) {
    if (options.channel_id) {
      this.channelId = options.channel_id
    }
    this.getChannels()
    this.getArticleList()
    
    // 添加模拟数据，以便在开发过程中显示文章列表
    this.addMockData()
  },
  onPullDownRefresh() {
    this.page = 1
    this.articleList = []
    this.getArticleList().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    if (this.loadStatus === 'loadmore') {
      this.loadMore()
    }
  },
  methods: {
    // 添加模拟数据
    addMockData() {
      // 模拟栏目数据
      this.channelList = [
        { name: '全部' },
        { name: '新闻', id: 1 },
        { name: '科技', id: 2 },
        { name: '娱乐', id: 3 },
        { name: '体育', id: 4 },
        { name: '财经', id: 5 }
      ]
      
      // 模拟文章列表数据
      this.articleList = [
        {
          id: 1,
          title: '这是一篇测试文章标题，内容非常精彩',
          description: '这是文章的简短描述，介绍了文章的主要内容和亮点，吸引读者点击阅读全文。',
          image: 'https://picsum.photos/200/150?random=1',
          user: { nickname: '张三' },
          create_date: '2023-08-21',
          views: 1234
        },
        {
          id: 2,
          title: '多图文章测试，这里展示多张图片的效果',
          images: 'https://picsum.photos/200/150?random=2,https://picsum.photos/200/150?random=3,https://picsum.photos/200/150?random=4',
          images_list: [
            'https://picsum.photos/200/150?random=2',
            'https://picsum.photos/200/150?random=3',
            'https://picsum.photos/200/150?random=4'
          ],
          user: { nickname: '李四' },
          create_date: '2023-08-20',
          views: 2345
        },
        {
          id: 3,
          title: '又一篇测试文章，用于展示列表效果',
          description: '这是另一篇文章的简短描述，同样介绍了文章的主要内容和亮点。',
          image: 'https://picsum.photos/200/150?random=5',
          user: { nickname: '王五' },
          create_date: '2023-08-19',
          views: 3456
        },
        {
          id: 4,
          title: '第四篇测试文章，继续丰富列表内容',
          description: '这是第四篇文章的简短描述，让列表看起来更加丰富。',
          image: 'https://picsum.photos/200/150?random=6',
          user: { nickname: '赵六' },
          create_date: '2023-08-18',
          views: 4567
        },
        {
          id: 5,
          title: '又一篇多图文章，展示更多图片',
          images: 'https://picsum.photos/200/150?random=7,https://picsum.photos/200/150?random=8,https://picsum.photos/200/150?random=9',
          images_list: [
            'https://picsum.photos/200/150?random=7',
            'https://picsum.photos/200/150?random=8',
            'https://picsum.photos/200/150?random=9'
          ],
          user: { nickname: '钱七' },
          create_date: '2023-08-17',
          views: 5678
        }
      ]
      
      // 设置加载状态为"没有更多"
      this.loadStatus = 'nomore'
    },
    
    // 获取栏目列表
    async getChannels() {
      try {
        const { data } = await archives.getChannel()
        if (data.code === 1) {
          this.channelList = [{ name: '全部' }]
          data.data.channel.forEach(item => {
            this.channelList.push({
              name: item.name,
              id: item.id
            })
          })
          
          // 如果有指定栏目ID，设置当前选中的Tab
          if (this.channelId) {
            const index = this.channelList.findIndex(item => item.id === this.channelId)
            if (index !== -1) {
              this.currentTab = index
            }
          }
        }
      } catch (error) {
        console.error('获取栏目列表失败', error)
      }
    },
    
    // 获取文章列表
    async getArticleList() {
      try {
        this.loadStatus = 'loading'
        const params = {
          page: this.page
        }
        
        // 如果选择了栏目
        if (this.currentTab > 0 && this.channelList[this.currentTab]) {
          params.channel = this.channelList[this.currentTab].id
        }
        
        // 如果有搜索关键词
        if (this.keyword) {
          params.keywords = this.keyword
        }
        
        const { data } = await archives.getArchivesList(params)
        if (data.code === 1) {
          const list = data.data.pageList.data || []
          
          // 处理图片列表
          list.forEach(item => {
            if (item.images) {
              item.images_list = item.images.split(',')
            }
          })
          
          if (this.page === 1) {
            this.articleList = list
          } else {
            this.articleList = [...this.articleList, ...list]
          }
          
          // 判断是否还有更多数据
          if (this.page >= data.data.pageList.last_page) {
            this.loadStatus = 'nomore'
          } else {
            this.loadStatus = 'loadmore'
          }
        }
      } catch (error) {
        console.error('获取文章列表失败', error)
        this.loadStatus = 'loadmore'
      }
    },
    
    // 加载更多
    loadMore() {
      this.page++
      this.getArticleList()
    },
    
    // 切换栏目
    onTabChange(index) {
      this.currentTab = index
      this.page = 1
      this.articleList = []
      this.getArticleList()
    },
    
    // 搜索
    onSearch() {
      this.page = 1
      this.articleList = []
      this.getArticleList()
    },
    
    // 跳转到详情页
    goDetail(item) {
      uni.navigateTo({
        url: `/pages_article/detail/index?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.article-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-box {
  padding: 20rpx;
  background-color: #ffffff;
}

.channel-tabs {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.article-list {
  padding: 0 20rpx;
}

.article-item {
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.article-item-single {
  display: flex;
  justify-content: space-between;
  
  .article-info {
    flex: 1;
    margin-right: 20rpx;
  }
}

.article-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.article-desc {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.article-meta {
  font-size: 24rpx;
  color: #999999;
  
  .article-author, .article-time, .article-views {
    margin-right: 20rpx;
  }
}

.article-item-multi {
  .article-images {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
  }
  
  .article-meta {
    margin-top: 10rpx;
  }
}
</style>